<template>
  <MyTable
    :columns="columns"
    :tableData="films"
    :total="total"
    :page="page"
    @currentChange="currentChange"
  >
    <div slot="actor" slot-scope="{ row }">
      <template v-for="(item, index) in row.actor.split(',')">
        <el-tag :key="index" size="medium" type="success">{{ item }}</el-tag> &nbsp;
      </template>
    </div>
    <div slot="action" slot-scope="{ row }">
      <el-button size="mini" type="primary" @click="edit(row)">修改电影</el-button>
      <el-button size="mini" type="danger" @click="del(row)">删除电影</el-button>
    </div>
  </MyTable>
</template>

<script>
export default {
  props: ['films', 'total', 'loadData', 'page'],
  data() {
    return {
      columns: [
        { key: 'name', label: '电影名称' },
        { key: 'director', label: '导演' },
        { key: 'actor', label: '演员' },
        { key: 'movie_long', label: '电影时长' },
        { key: 'action', label: '操作' }
      ]
    }
  },
  methods: {
    edit(row) {
      console.log('修改', row)
    },
    del(row) {
      console.log('删除', row)
    },
    currentChange(page) {
      this.loadData(page)
      let query = { ...this.$route.query, page }
      this.$router.replace({ query })
    }
  }
}
</script>

<style lang="scss" scoped></style>
